<template>
  <div class="header">
    <div class="left">
      <el-icon class="fold-btn" @click="toggleSidebar">
        <Fold v-if="!isCollapse" />
        <Expand v-else />
      </el-icon>
      <div class="breadcrumb">
        <el-breadcrumb>
          <el-breadcrumb-item>{{ route.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="right">
      <div class="header-icons">
        <OrderNotification class="header-notification" />
        <el-tooltip content="刷新页面" placement="bottom">
          <el-icon class="header-icon" @click="refreshPage"><Refresh /></el-icon>
        </el-tooltip>
        <el-tooltip content="全屏显示" placement="bottom">
          <el-icon class="header-icon" @click="toggleFullScreen">
            <FullScreen v-if="!isFullScreen" />
            <ScaleToOriginal v-else />
          </el-icon>
        </el-tooltip>
      </div>
      
      <!-- 使用单独的容器包裹订单管理按钮和通知组件 -->
      <div class="order-container">
        <el-tooltip content="订单管理" placement="bottom">
          <el-button type="primary" size="small" @click="goToOrders" class="order-button">
            <el-icon><Document /></el-icon>
            订单管理
          </el-button>
        </el-tooltip>
      </div>
      
      <el-dropdown trigger="click">
        <span class="user-info">
          <el-avatar :size="32" :src="userAvatar" />
          <span class="username">{{ userName }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handleProfile">个人信息</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAppStore } from '@/stores/app'
import { employeeApi } from '@/api'
import { ElMessageBox, ElMessage } from 'element-plus'
import defaultAvatar from '@/assets/avatar.svg'
import OrderNotification from '@/components/OrderNotification.vue'
import { 
  Fold, 
  Expand, 
  Refresh, 
  FullScreen, 
  ScaleToOriginal,
  Document
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()
const isFullScreen = ref(false)

const isCollapse = computed(() => appStore.sidebarCollapsed)
const userName = computed(() => appStore.userName || '管理员')
const userAvatar = computed(() => appStore.userAvatar || defaultAvatar)

const toggleSidebar = () => {
  appStore.toggleSidebar()
}

// 刷新页面
const refreshPage = () => {
  window.location.reload()
}

// 切换全屏
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullScreen.value = true
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
      isFullScreen.value = false
    }
  }
}

const handleProfile = () => {
  // 跳转到个人信息页面
  router.push('/profile')
}

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await employeeApi.logout()
      localStorage.removeItem('token')
      appStore.clearUserInfo()
      ElMessage.success('退出登录成功')
      
      // 如果有登录页，则跳转到登录页
      if (router.hasRoute('Login')) {
        router.push('/login')
      } else {
        // 重新加载页面
        window.location.reload()
      }
    } catch (error) {
      ElMessage.error('退出登录失败')
    }
  }).catch(() => {})
}

// 导航到订单页面
const goToOrders = () => {
  console.log('直接导航到订单页面，当前路径:', router.currentRoute.value.path)
  
  // 检查当前是否已在订单页面
  if (router.currentRoute.value.path === '/orders') {
    console.log('已在订单页面，尝试强制刷新组件')
    // 先跳转到其他页面再回来，强制刷新组件
    router.push('/dashboard')
      .then(() => {
        setTimeout(() => {
          router.push('/orders')
            .then(() => console.log('成功刷新订单页面'))
            .catch(err => console.error('刷新订单页面失败:', err))
        }, 100)
      })
      .catch(err => console.error('跳转失败:', err))
    return
  }
  
  // 尝试三种不同方式加载订单页面
  console.log('尝试方式1: 普通路径跳转')
  router.push('/orders')
    .then(() => {
      console.log('方式1成功')
      ElMessage.success('进入订单管理页面')
    })
    .catch(err => {
      console.error('方式1失败:', err)
      console.log('尝试方式2: 名称跳转')
      
      router.push({ name: 'Orders' })
        .then(() => {
          console.log('方式2成功')
          ElMessage.success('进入订单管理页面')
        })
        .catch(err => {
          console.error('方式2失败:', err)
          console.log('尝试方式3: 重置路由后跳转')
          
          // 最后尝试强制刷新路由视图
          router.push('/')
            .then(() => {
              console.log('先导航到根路径')
              setTimeout(() => {
                router.push('/orders')
                  .then(() => {
                    console.log('方式3成功，当前路径:', router.currentRoute.value.path)
                    ElMessage.success('进入订单管理页面')
                  })
                  .catch(err => {
                    console.error('方式3失败:', err)
                    ElMessage.error('导航失败:' + err.message)
                    
                    // 尝试加载测试路由
                    console.log('尝试测试路由')
                    router.push('/orders-test')
                      .then(() => console.log('测试路由成功'))
                      .catch(err => console.error('测试路由失败:', err))
                  })
              }, 100)
            })
            .catch(err => {
              console.error('初始导航失败:', err)
              ElMessage.error('无法导航:' + err.message)
            })
        })
    })
}
</script>

<style scoped>
.header {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.left {
  display: flex;
  align-items: center;
}

.fold-btn {
  font-size: 22px;
  cursor: pointer;
  margin-right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: all 0.3s;
}

.fold-btn:hover {
  color: var(--el-color-primary);
  transform: scale(1.1);
}

.breadcrumb {
  margin-left: 15px;
}

.right {
  display: flex;
  align-items: center;
}

.header-icons {
  display: flex;
  align-items: center;
  justify-content: center; /* 确保子元素居中 */
  margin-right: 20px;
  height: 40px; /* 统一高度 */
}

.header-icon {
  font-size: 20px;
  margin: 0 10px; /* 增加左右间距 */
  cursor: pointer;
  color: #606266;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* 撑满父容器高度 */
}

.header-icon:hover {
  color: var(--el-color-primary);
  transform: scale(1.2);
}

.header-notification {
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center; /* 确保铃铛居中 */
  height: 100%; /* 撑满父容器高度 */
  position: relative; /* 确保定位正确 */
  top: 0; /* 重置任何可能的偏移 */
}

.order-container {
  display: flex;
  align-items: center;
  margin: 0 15px;
  height: 40px; /* 统一高度 */
}

.order-button {
  margin-right: 0;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 10px;
  height: 40px; /* 统一高度 */
}

.username {
  margin-left: 10px;
  font-size: 15px;
}

/* 移除铃铛样式 */
.header-bell {
  margin-right: 10px;
}
</style> 